import React from 'react';
import { connect } from 'umi';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
import './Tabs.css'


const Tabs = ({ pages, activeWindowId,changePage,newPage,closePage }) => {
 
    return (
        <div className="tabs d-flex flex-row">
            <ul className="nav nav-tabs">
                {
                    pages.map((page, index) => {
                        return (
                            <li className="nav-item" key={page.windowId}>
                                <a className={"nav-link " + (page.windowId === activeWindowId ? "active" : "")} 
                                    onClick={(e)=>{e.preventDefault();changePage(page)}}
                                    href="#"
                                >{page.title}
                                    <span onClick={e=>closePage(page)}>        
                                        <FontAwesomeIcon className="tab-close" icon={faTimes} size={'xs'} swapOpacity>
                                        </FontAwesomeIcon>
                                    </span>
                                </a>
                            </li>
                        )
                    })
                }
            </ul>
            <button type="button" className="tab-add-button" onClick={newPage}><FontAwesomeIcon icon={faPlus} color={"white"} ></FontAwesomeIcon></button>
        </div>
    )
}

const mapStateToProps = ({ tabs }) => {
    return {
        pages: tabs.pages,
        activeWindowId: tabs.activeWindowId
    }
}
const mapDispatchToProps ={
    changePage: (page)=>{
        console.log('changePage',page);
        return {
            type:'tabs/changePage',
            payload:{
                windowId:page.windowId
            }
        }
    },
    newPage: ()=>{
        return {
            type:'tabs/newPage'
        }
    },
    closePage:(page)=>{
        return{
            type:'tabs/closePage',
            payload:page
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Tabs);